<template>
  <div>
    <div class="box">
      <div class="topBar">
        <el-form
          ref="headerSearchForm"
          :model="headerSearchForm"
          :inline="true"
          label-width="150px"
        >
          <el-form-item label="发起日期：" prop="initiationDate">
            <el-date-picker
              v-model="headerSearchForm.initiationDate"
              type="date"
              value-format="yyyyMMdd"
            />
          </el-form-item>
          <el-form-item label="复核日期：" prop="reviewDate">
            <el-date-picker
              v-model="headerSearchForm.reviewDate"
              type="date"
              value-format="yyyyMMdd"
            />
          </el-form-item>
          <el-form-item label="审核日期：" prop="approvalDate">
            <el-date-picker
              v-model="headerSearchForm.approvalDate"
              type="date"
              value-format="yyyyMMdd"
            />
          </el-form-item>
          <el-form-item label="流程状态：" prop="processStat">
            <el-select v-model="headerSearchForm.processStat" placeholder="请选择">
              <el-option
                v-for="item in processStatList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="流程渠道：" prop="processChannel">
            <el-select v-model="headerSearchForm.processChannel" placeholder="请选择">
              <el-option
                v-for="item in processChannelList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="流程类型：" prop="processType">
            <el-select v-model="headerSearchForm.processType" placeholder="请选择">
              <el-option
                v-for="item in processTypeList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户名称：" prop="custName">
            <el-input v-model="headerSearchForm.custName" placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item label="客户号：" prop="custNumber">
            <el-input v-model="headerSearchForm.custNumber" placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item label="证件类型：" prop="idType">
            <el-select v-model="headerSearchForm.idType" placeholder="请选择">
              <el-option
                v-for="item in idTypeList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码：" prop="idNumber">
            <el-input v-model="headerSearchForm.idNumber" placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item label="同业属性：" prop="ibankProp">
            <el-select v-model="headerSearchForm.ibankProp" placeholder="请选择">
              <el-option
                v-for="item in ibankPropList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户类型：" prop="custType">
            <el-select v-model="headerSearchForm.custType" placeholder="请选择">
              <el-option
                v-for="item in custTypeList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div style="margin: 10px 0px">
            <el-row>
              <el-col :span="16" style="text-align: left">
                <el-button v-if="!addFlag" type="primary" class="btn" @click="handleAdd"
                  >发起流转</el-button
                >
              </el-col>
              <el-col :span="8" style="float: right; text-align: right">
                <el-button type="primary" @click="getData" class="btn">查询</el-button>
                <el-button type="primary" @click="resetFrom" class="btn">重置</el-button>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div class="bottomInfo">
        <div class="con-form" v-if="addFlag">
          <div class="top_title">
            <span class="title">同业客户信息</span>
            <el-button type="primary" size="mini" class="btn" @click="cancelAdd"
              >返回</el-button
            >
          </div>
          <el-form
            ref="queryForm"
            :model="queryForm"
            :rules="queryRules"
            label-width="190px"
          >
            <el-form-item label="客户类型：" prop="custType">
              <el-select
                :disabled="title == '详情'"
                v-model="queryForm.custType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in custTypeList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建渠道：" prop="creationCh">
              <el-select
                :disabled="title == '详情'"
                v-model="queryForm.creationCh"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in creationChList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户名称：" prop="custName">
              <el-input
                :disabled="title == '详情'"
                v-model="queryForm.custName"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="客户英文名称：" prop="custNameEn">
              <el-input
                :disabled="title == '详情'"
                v-model="queryForm.custNameEn"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="主证件类型：" prop="idType">
              <el-select
                :disabled="title == '详情'"
                v-model="queryForm.idType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in idTypeList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主证件号码：" prop="idNumber">
              <el-input v-model="queryForm.idNumber" placeholder="请输入"> </el-input>
            </el-form-item>
            <el-form-item label="注册登记国家：" prop="regCountry">
              <el-select
                :disabled="title == '详情'"
                filterable
                v-model="queryForm.regCountry"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in regCountryList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="同业属性：" prop="ibankProp">
              <el-select
                :disabled="title == '详情'"
                filterable
                v-model="queryForm.ibankProp"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in ibankPropList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="国民经济行业类型(门类)：" prop="indCat">
              <el-select
                :disabled="title == '详情'"
                v-model="queryForm.indCat"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in indCatList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="国民经济行业类型(大类)：" prop="indClass">
              <el-select
                :disabled="title == '详情'"
                v-model="queryForm.indClass"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in indClassList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户状态：" prop="custStatus">
              <el-select
                v-model="queryForm.custStatus"
                :disabled="title == '详情'"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in custStatusList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <div
              class="top_title"
              style="margin-top: 30px"
              v-if="(queryForm.auxDocs || []).length > 0"
            >
              <span class="title">辅证件信息</span>
              <!-- <el-button
                type="primary"
                size="mini"
                class="btn"
                @click="addAusd"
                :disabled="title == '详情'"
                >新增</el-button
              > -->
            </div>
            <div v-for="(item, index) in queryForm.auxDocs" :key="index">
              <el-form-item label="辅证件类型：" prop="auxDocType">
                <div>
                  <el-select
                    v-model="queryForm.auxDocs[index]['auxDocType']"
                    placeholder="请选择"
                    :disabled="title == '详情'"
                  >
                    <el-option
                      v-for="item in idTypeList"
                      :key="item.dictCode"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                  <el-button
                    style="margin-left: 20px"
                    type="primary"
                    size="small"
                    class="btn"
                    :disabled="title == '详情'"
                    @click="delauxd(index)"
                    >删除</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item label="辅证件号码：" prop="auxDocNum">
                <el-input
                  :disabled="title == '详情'"
                  v-model="queryForm.auxDocs[index]['auxDocNum']"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
            </div>
            <div class="top_title" style="margin-top: 30px">
              <span :disabled="title == '详情'" class="title">上级主管单位信息</span>
            </div>
            <el-form-item label="上级主管单位客户号：" prop="supCustNumber">
              <!-- <div style="display: flex;"> -->
              <el-input
                style="width: auto"
                :disabled="title == '详情'"
                v-model="queryForm.supCustNumber"
                placeholder="请输入"
              >
              </el-input>
              <!-- <el-button
                style="margin-left: 20px"
                type="primary"
                size="small"
                class="btn"
                :disabled="title == '详情'"
                @click="getTopDetail('supCustNumber')"
                >获取</el-button
              > -->
              <!-- </div> -->
            </el-form-item>
            <el-form-item label="上级主管单位名称：" prop="supCustName">
              <el-input
                style="width: auto"
                :disabled="title == '详情'"
                v-model="queryForm.supCustName"
                placeholder="请输入"
              >
              </el-input>
              <!-- <el-button
                style="margin-left: 20px"
                type="primary"
                size="small"
                class="btn"
                :disabled="title == '详情'"
                @click="getTopDetail('supCustName')"
                >获取</el-button
              > -->
            </el-form-item>
            <el-form-item label="上级主管单位证件类型：" prop="supIdType">
              <el-select
                v-model="queryForm.supIdType"
                placeholder="请选择"
                :disabled="title == '详情'"
              >
                <el-option
                  v-for="item in idTypeList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上级主管单位主证件号码：" prop="supIdNumber">
              <el-input
                style="width: auto"
                :disabled="title == '详情'"
                v-model="queryForm.supIdNumber"
                placeholder="请输入"
              >
              </el-input>
              <!-- <el-button
                style="margin-left: 20px"
                type="primary"
                size="small"
                class="btn"
                :disabled="title == '详情'"
                @click="getTopDetail('supIdNumber')"
                >获取</el-button
              > -->
            </el-form-item>
            <div class="con-btn">
              <el-button type="primary" @click="save" class="btn" v-if="title == '新增'"
                >保存</el-button
              >
              <el-button
                type="primary"
                @click="wanderAbout"
                class="btn"
                v-if="title != '详情'"
                >流转</el-button
              >
            </div>
          </el-form>
        </div>
        <div class="tab_body" v-if="!addFlag">
          <el-table
            :data="tableData"
            @selection-change="handleSelectionChange"
            style="width: 100%"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column type="index" label="序号"> </el-table-column>
            <!-- <el-table-column prop="custNumber" label="ID"> </el-table-column> -->
            <el-table-column prop="custNumber" label="客户号"> </el-table-column>
            <el-table-column prop="custType" label="客户类型"> </el-table-column>
            <el-table-column prop="custName" width="180px" label="客户名称"> </el-table-column>
            <el-table-column prop="custNameEn" label="客户英文名称" width="180px">
            </el-table-column>
            <el-table-column prop="processStat" label="流程状态"> </el-table-column>
            <el-table-column prop="failReason" label="失败原因"> </el-table-column>
            <el-table-column prop="initiator" label="发起人"> </el-table-column>
            <el-table-column prop="initiationDate" label="发起日期" width="180px">
            </el-table-column>
            <el-table-column prop="reviewer" label="复核人"> </el-table-column>
            <el-table-column prop="reviewDate" label="复核日期" width="180px">
            </el-table-column>
            <el-table-column prop="approver" label="审核人"> </el-table-column>
            <el-table-column prop="approvalDate" label="审核日期" width="180px">
            </el-table-column>
            <el-table-column prop="processChannel" label="流程渠道" width="180px">
            </el-table-column>
            <el-table-column prop="processType" label="流程类型"> </el-table-column>
            <el-table-column prop="idType" label="证件类型" width="180px">
            </el-table-column>
            <el-table-column prop="idNumber" label="证件号码" width="180px">
            </el-table-column>
            <el-table-column prop="ibankProp" label="同业属性"> </el-table-column>
            <el-table-column prop="" label="操作" width="200px" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handlePass(scope.$index, scope.row)"
                  v-if="
                    scope.row.processStat == '待复核' || scope.row.processStat == '待审批'
                  "
                  >通过</el-button
                >

                <el-button
                  type="text"
                  size="small"
                  @click="handleNopass(scope.$index, scope.row)"
                  v-if="
                    scope.row.processStat == '待复核' || scope.row.processStat == '待审批'
                  "
                  >拒绝</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handleDetail(scope.$index, scope.row)"
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handleCancel(scope.$index, scope.row)"
                  v-if="
                    scope.row.processStat == '待发起' ||
                    scope.row.processStat == '拒绝' ||
                    scope.row.processStat == 'ecif更新失败'
                  "
                  >重新发起</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="
                    scope.row.processStat == '待撤回' || scope.row.processStat == '待审批'
                  "
                  @click="handleWithdraw(scope.$index, scope.row)"
                  >撤回</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="
                    scope.row.processStat != '待审批' &&
                    scope.row.processStat != 'ecif更新成功'
                  "
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageFn"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetDictByCode, getDictItems } from "@/api/common";
import {
  getList,
  getDetail,
  reloadInitiate,
  deleteProcess,
  pass,
  noPass,
  reTurn,
  passExamine,
  reloadMove,
} from "@/api/maintainCustomers";
export default {
  name: "addCustomers",

  data() {
    return {
      queryForm: {
        custType: "",
        creationCh: "",
        custName: "",
        custNameEn: "",
        idType: "",
        idNumber: "",
        regCountry: "",
        ibankProp: "",
        indCat: "",
        entityCode: "",
        indClass: "",
        custStatus: "",
        supCustNumber: "",
        supName: "",
        supIdType: "",
        indCsupIdNumberat: "",
        auxDocs: [
          {
            auxDocType: "",
            auxDocNum: "",
          },
        ],
      },
      tableData: [],
      addFlag: false,
      dialogVisible: false,
      base_URL: "",
      title: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      headerSearchForm: {
        initiationDate: "",
        reviewDate: "",
        approvalDate: "",
        processStat: "",
        processChannel: "",
        processType: "",
        custName: "",
        custNumber: "",
        idType: "",
        idNumber: "",
        ibankProp: "",
        custStatus: "",
      },
      processStatList: [
        { dictCode: "待发起", dictName: "待发起" },
        { dictCode: "待复核", dictName: "待复核" },
        { dictCode: "待审批", dictName: "待审批" },
        { dictCode: "拒绝", dictName: "拒绝" },
        { dictCode: "ecif更新成功", dictName: "ecif更新成功" },
        { dictCode: "ecif更新失败", dictName: "ecif更新失败" },
      ], //流程状态
      processChannelList: [], //创建渠道
      regCountryList: [], //注册登记国家
      custStatusList: [], //客户状态
      ibankPropList: [], //同业属性
      idTypeList: [], //证件类型
      custTypeList: [
        { dictCode: "法人户", dictName: "法人户" },
        { dictCode: "产品户", dictName: "产品户" },
      ], //客户类型
      processTypeList: [
        { dictCode: "新建客户", dictName: "新建客户" },
        { dictCode: "维护客户", dictName: "维护客户" },
      ], //流程类型
      queryRules: {
        customTypeName: [
          { required: true, message: "请输入", trigger: "blur" },
          { validator: this.validateName, trigger: "blur" },
        ],
      },
      uploadHeaders: {},
      selectData: [],
    };
  },

  mounted() {
    this.getData();
    this.getCode("CREATE_CHANNELS", "processChannelList");
    this.getCode("ID_TYPE", "idTypeList");
    this.getCode("INTERINDUSTRY_ATTRIBUTES", "ibankPropList");
  },

  methods: {
    resetFrom() {
      this.queryForm = {
        custType: "",
        creationCh: "",
        custName: "",
        custNameEn: "",
        idType: "",
        idNumber: "",
        regCountry: "",
        ibankProp: "",
        indCat: "",
        entityCode: "",
        indClass: "",
        custStatus: "",
        supCustNumber: "",
        supName: "",
        supIdType: "",
        indCsupIdNumberat: "",
        auxDocs: [
          {
            auxDocType: "",
            auxDocNum: "",
          },
        ],
      };
    },
    handleSelectionChange(row) {
      console.log(row);
      this.selectData = row;
    },
    // 获取字典
    async getCode(typeGroupCode, optName) {
      try {
        const { data } = await GetDictByCode({
          typeGroupcode: typeGroupCode,
        });
        this.formatterCode(typeGroupCode, data.dictData, optName);
      } catch (error) {}
    },
    formatterCode(typeGroupCode, list, optName) {
      const options = [];
      this[optName] = [];
      if (list && list.length > 0) {
        list.forEach((element) => {
          options.push({
            dictName: element.dictName,
            dictCode: element.dictCode,
          });
        });
        this[optName] = options;
        if (typeGroupCode === "field_business_type") {
          this.tabTableDataCloumns1[6].options = options;
        }
      }
    },
    async handleAdd() {
      try {
        if (this.selectData.length === 0) {
          this.$message.error("请选择一条数据");
          return;
        }
        let index = this.selectData.findIndex((item) => {
          return item.processStat != "待发起";
        });
        if (index > -1) {
          this.$message.warning("请选择流程状态为待发起的数据");
          return false;
        }
        let arr = [];
        this.selectData.forEach((item) => {
          arr.push(item.ibankCustId);
        });
        const res = await reloadMove(arr);
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getData();
        }
      } catch (error) {}
    },
    cancelAdd() {
      this.addFlag = false;
    },
    save() {},

    // 详情
    async handleDetail(index, row) {
      try {
        const res = await getDetail({ ibankCustId: row.ibankCustId });
        console.log(res);
        if (res) {
          this.queryForm = res.data;
          this.title = "详情";
          this.addFlag = true;
        }
        // console.log(res);
      } catch (error) {}
    },
    //通过
    async handlePass(index, row) {
      try {
        if (row.processStat == "待复核") {
          const res = await pass({ ibankCustId: row.ibankCustId });
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.getData();
          }
        }
        if (row.processStat == "待审批") {
          const res = await passExamine({ ibankCustId: row.ibankCustId });
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.getData();
          }
        }
      } catch (error) {}
    },
    //拒绝
    async handleNopass(index, row) {
      try {
        const res = await noPass({ ibankCustId: row.ibankCustId });
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getData();
        }
      } catch (error) {}
    },
    //撤回
    async handleWithdraw(index, row) {
      try {
        const res = await reTurn({ ibankCustId: row.ibankCustId });
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getData();
        }
      } catch (error) {}
    },
    //删除
    async handleDelete(index, row) {
      try {
        const res = await deleteProcess({ ibankCustId: row.ibankCustId });
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getData();
        }
      } catch (error) {}
    },
    //重新发起
    async handleCancel(index, row) {
      try {
        const res = await reloadInitiate({ ibankCustId: row.ibankCustId });
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getData();
        }
      } catch (error) {}
    },
    async getData() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.headerSearchForm,
      };
      const { data } = await getList(params);
      console.log(data, "999");
      if (data) {
        this.tableData = data.records;
        this.total = data.total;
      }
      // console.log(res);
    },
    validateName(rule, value, callback) {
      // 前后不应有空格符、制表符、回车符、换行符
      if (/^\s+|\s+$/.test(value)) {
        return callback(new Error("名称不能以空格开头或结尾"));
      }
      // 仅为单字节构成时，名称中间可含空格
      if (/^\w+(\s+\w+)*$/.test(value)) {
        return callback();
      }
      // 名称含双字节字符，中间不可含空格
      if (/[\u4E00-\u9FA5]/.test(value) && /\s/.test(value)) {
        return callback(new Error("名称含有双字节字符，中间不可含空格"));
      }
      // 长度应超过2个（含）中文字符或4个（含）英文字符
      if ((value.match(/[\u4E00-\u9FA5]/g) || []).length < 2 && value.length < 4) {
        return callback(new Error("名称长度应超过2个（含）中文字符或4个（含）英文字符"));
      }
      callback();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    pageFn(num) {
      this.pageNum = num;
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .topBar {
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-bottom: 10px;
  }
  .bottomInfo {
    background-color: #262d47;
    padding: 10px 20px 30px 20px;
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  .top_title {
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #354060;
    margin-bottom: 20px;
    .title {
      color: #fff;
      font-size: 14px;
      display: inline-block;
      margin-right: 20px;
    }
  }
  .con-form {
    .el-form-item {
      margin-bottom: 25px;
    }
  }
  .el-pagination {
    text-align: right;
    position: absolute;
    right: 30px;
    bottom: 50px;
  }
}
::v-deep.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
